/* eslint-disable react-hooks/rules-of-hooks */
import React, { useEffect, useState } from "react";
import { Table, Modal } from "antd";
import type { ColumnsType } from "antd/es/table";
import { DeleteOutlined, EditOutlined } from "@ant-design/icons";
import {
  hyd_guanli_list,
  hyd_guanli_delete,
} from "../../../api/HuangYuDong/huiyi";
import "../../../styles/HuangYuDong/HuiYi/HuiYiGuanLi.scss";
import { useNavigate } from "react-router-dom";
function HuiYiGuanLi(props: any) {
  interface DataType {
    key: string;
    name: string;
    shijian: string;
    renyuan: string;
    time: string;
    mingcheng: string;
    zhuangtai: string;
    caozuo: string[];
  }

  const columns: ColumnsType<DataType> = [
    {
      title: "会议图片",
      dataIndex: "pic",
      key: "pic",
      render: (pic) => <img src={pic} alt="" />,
    },

    {
      title: "会议室名称",
      dataIndex: "name",
      key: "name",
    },

    {
      title: "会议状态",
      key: "zhuangtai",
      dataIndex: "zhuangtai",
    },
    {
      title: "最多容纳人数",
      dataIndex: "renshu",
      key: "renshu",
    },
    {
      title: "所在工作地点",
      key: "didian",
      dataIndex: "didian",
    },
    {
      title: "所在工作城市",
      key: "chengshi",
      dataIndex: "chengshi",
    },
    {
      title: "设备",
      key: "shebei",
      dataIndex: "shebei",
    },
    {
      title: "是否允许预定",
      key: "yuding",
      dataIndex: "yuding",
    },
    {
      title: "备注",
      key: "beizhu",
      dataIndex: "beizhu",
    },
    {
      title: "操作",
      key: "caozuo",
      dataIndex: "caozuo",
      render: (_, record: { key: React.Key }) =>
        list.length >= 1 ? (
          <div className="operation">
            <span
              onClick={() => {
                xiangqing(record);
              }}
            >
              查看详情
            </span>
            <EditOutlined
              onClick={() => {
                xiugai(record);
              }}
            />
            <DeleteOutlined
              onClick={() => {
                del(record);
              }}
            />
          </div>
        ) : null,
    },
  ];
  let [id, useId] = useState("");
  //   删除
  let del = (record: any) => {
    console.log(record, "删除");
    setIsModalOpen(true);
    useId(record.id);
  };
  //   跳转
  let navigate = useNavigate();
  //  修改
  let xiugai = (record: any) => {
    console.log("修改");
    navigate("/index/huiyi/huiyishi_xiugai", { replace: false, state: record });
  };
  //  查看详情
  let xiangqing = (record: any) => {
    console.log("查看详情");
    navigate("/index/huiyi/huiyishi_xiangqing", {
      replace: false,
      state: record,
    });
  };
  // 新增
  let add = () => {
    navigate("/index/huiyi/huiyishi_xiugai");
  };
  // 会议列表请求
  let liebiao = () => {
    hyd_guanli_list().then((ok) => {
      console.log(ok);
      let arr = ok.data.map((v: any, i: any) => {
        return {
          key: i,
          id: v.id,
          name: v.name,
          pic: v.pic,
          renshu: v.renshu,
          yuding: v.yuding,
          didian: v.didian,
          dizhi: v.dizhi,
          chengshi: v.chengshi,
          shebei: v.shebei,
          beizhu: v.beizhu,
          zhuangtai: v.zhuangtai,
          shenpi: v.shenpi,
        };
      });
      useList(arr);
    });
  };

  // 列表数据
  let [list, useList] = useState([]);
  useEffect(() => {
    liebiao();
  }, []);
  // 提示框
  const [isModalOpen, setIsModalOpen] = useState(false);

  const handleOk = () => {
    setIsModalOpen(false);
    console.log(id);
    hyd_guanli_delete({ id }).then((ok) => {
      console.log(ok);
      liebiao();
    });
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };
  return (
    <div className="huiyiguanli">
      <div className="center">
        <h2>
          会议室管理
          <button
            className="add"
            onClick={() => {
              add();
            }}
          >
            +新增会议室
          </button>
        </h2>
        <Modal
          title="取消确认"
          open={isModalOpen}
          onOk={handleOk}
          onCancel={handleCancel}
          okText="确定"
          cancelText="取消"
        >
          信息删除后无法恢复，确定要删除此会议室信息吗？
        </Modal>
        <Table
          columns={columns}
          dataSource={list}
          pagination={{ pageSize: 7 }}
        />
      </div>
    </div>
  );
}

export default HuiYiGuanLi;
